<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问答知识库</title>
    <style>
        #head,#tbody,#page{
            width: 90%;
            margin: auto;
        }
        #head{
            background-color: rgb(204, 200, 200);
            height: 40px;
        }
        th{
            background-color: rgb(102, 102, 243);
            color: white;
        }
        .body{
            text-align: center;
        }
        .tb{
            margin: auto;
            width: 100%;
        }
        tr:nth-child(2n+1){
            background-color: rgb(236, 237, 243) ;
        }
        tr:nth-child(2n){
            background-color: rgb(191, 204, 230);
        }
        .btn{
            background: rgb(217, 218, 221);
        }
        .btn{
            border-radius: 6px;
        }
        .head-btn{
            margin-top: 9px;
            float: right;
        }
        #page{
            border-top: 1px solid rgb(84, 84, 238);
            border-bottom: 1px solid  rgb(84, 84, 238);
            padding: 0;
        }
        .page-btn{
            float: right;
            margin: 0%;
        }
        .page-btn{
            background-color: rgb(106, 106, 250);
        }
        .sel_btn{
            height: 21px;
            line-height: 21px;
            padding: 0 11px;
            background: #EFEFEF;
            border: 1px #000000 solid;
            border-radius: 3px;
            color: #000000;
            display: inline-block;
            text-decoration: none;
            font-size: 12px;
            outline: none;
        }
    </style>
    <script type="text/javascript" th:src="@{../static/js/jquery-1.10.2.min.js}"></script>
    <script type="text/javascript" th:src="@{../static/js/layui/layui.all.js}"></script>
</head>
<body>
    <div class="body">
        <!-- 头部 -->
        <div id="head" style="color: rgb(102, 102, 243);" class="demoTable">
            <span style="overflow: auto;">问答知识库</span>
            <span class="head-btn">
                <input th:value="${user.username}" type="text" disabled="disabled" >
                <input th:value="${user.sort}" type="text" disabled="disabled" >
                <button class="btn layui-btn" data-method="notice">新增+</button>
                <button class="btn layui-btn" data-method="notice2">批量导入</button>
                <button class="btn" onclick="deleteAll()">批量删除</button>
            </span>
        </div>
        <!-- 表格体 -->
        <div id="tbody">
            <table class="tb">
                <tr>
                    <th style="width: 26px;">序号</th>
                    <th style="width: 26px;">标准问题</th>
                    <th style="width: 26px;">领域</th>
                    <th style="width: 26px;">意图</th>
                    <th style="width: 26px;">关键词</th>
                    <th style="width: 26px;">标准答案</th>
                    <th style="width: 26px;">相似问题</th>
                    <th style="width: 26px;">操作</th>
                </tr>
                <tr th:each="qs , status : ${page.list}" th:object="${qs}">
                    <td th:text="${status.count}"></td>
                    <td th:text="${qs.question}"></td>
                    <td th:text="${qs.field}"></td>
                    <td th:text="${qs.intention}"></td>
                    <td th:text="${qs.keyword}"></td>
                    <td th:text="${qs.answer}"></td>
                    <td th:text="${qs.similarQuestion}"></td>
                    <td>
                        <a class="sel_btn" th:text="${qs.status=='1'?'已启用':'未启用'}" th:href="@{http://localhost:8092/KnowledgeBase/toUpdateStatus(username=${user.username},sort=${user.sort},qId=${qs.qId},page=${page.pageNum})}">启用</a>
                        <div class="demoTable">
                            <button class="layui-btn sel_btn" th:qid="${qs.qId}" data-method="notice3">编辑</button>
                        </div>
                        <a class="sel_btn" th:href="@{http://localhost:8092/KnowledgeBase/deleteById(username=${user.username},sort=${user.sort},qId=${qs.qId})}">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 页数 -->
        <div id="page">
            <span th:text="|共 ${page.total} 条记录 , 当前第 ${page.pageNum} 页 , 共 ${page.pages} 页, 每页 ${page.pageSize} 行 。|"></span>
            <span class="page-btn">
                第<input type="text" id="localPageId" value="1" style="width: 25px">页，
                <button id="localPage">跳转</button>
                <button id="prePage">上一页</button>
                <button id="nextPage">下一页</button>
            </span>
        </div>
    </div>

<script>


    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
    });
    var active = {
        notice: function(){
            var contentUrl = "http://localhost:8092/KnowledgeBase/toAlertAdd?username="+username+"&sort="+sort;
            //示范一个公告层
            layer.open({
                type: 2
                ,title: '新增' //不显示标题栏
                ,area: ['530px', '300px']
                ,shadeClose: true
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,moveType: 1 //拖拽模式，0或者1
                ,content: contentUrl //子页面路径
                ,end:function(){//子页面销毁时回调的方法
                    location.reload();
                }
            });
        },
        notice2: function(){
            //示范一个公告层
            layer.open({
                type: 2
                ,title: '批量导入' //不显示标题栏
                ,area: ['430px', '220px']
                ,shadeClose: true
                ,id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                ,moveType: 1 //拖拽模式，0或者1
                ,content: 'http://localhost:8092/KnowledgeBase/toUploadExcel?username='+username+"&sort="+sort //子页面路径
                ,end:function(){//子页面销毁时回调的方法
                    location.reload();
                }
            });
        },
        notice3: function(){
            var buttonId = $(this).attr("qid");
            var content = "http://localhost:8092/KnowledgeBase/toAlertUpdate?username="+username+"&sort="+sort+"&qId="+buttonId;
            //示范一个公告层
            layer.open({
                type: 2
                ,title: '修改' //不显示标题栏
                ,area: ['530px', '300px']
                ,shadeClose: true
                ,id: 'LAY_layuipro3' //设定一个id，防止重复弹出
                ,moveType: 1 //拖拽模式，0或者1
                ,content: content //子页面路径
                ,end:function(){//子页面销毁时回调的方法
                    location.reload();
                }
            });
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
    });

    var username = '[[${user.username}]]';
    var sort = '[[${user.sort}]]';

    // 分页JS
    var pageNum = [[${page.pageNum}]];
    var hasNextPage = [[${page.hasNextPage}]];//还有下一页
    var hasPreviousPage = [[${page.hasPreviousPage}]];//还有上一页

    $("#localPage").click(function () {
        var localPageId = $("#localPageId").val();
        location.assign("/KnowledgeBase/toKnowledgeBase?username="+username+"&sort="+sort+"&page="+ localPageId);
    });

    $("#nextPage").click(function () {
        location.assign("/KnowledgeBase/toKnowledgeBase?username="+username+"&sort="+sort+"&page="+ (pageNum + 1));
    });

    $("#prePage").click(function () {
        location.assign("/KnowledgeBase/toKnowledgeBase?username="+username+"&sort="+sort+"&page="+ (pageNum - 1));
    });

    //没有上一页
    if (!hasPreviousPage) {
        $("#prePage").prop("disabled", true);
    }
    //没有下一页
    if (!hasNextPage) {
        $("#nextPage").prop("disabled", true);
    }

    function deleteAll() {
        if(confirm("你确定要删除所有问题吗？")){
            window.location.href = "http://localhost:8092/KnowledgeBase/deleteAll?username="+username+"&sort="+sort;
            alert("删除成功！");
        }else {
            alert("删除失败！");
        };
    };

</script>
</body>
</html>